<template>
	<view class="page">
		<view class="bg"></view>
		<!-- 		<view class="nav">
			<u-icon name="arrow-left"labelSize="45rpx" ></u-icon>
			<view>交易明细</view>
		</view> -->
		<view class="top">
			<view @click="bill(0)" :class="index==0?'active':''">月账单</view>
			<view @click="bill(1)" :class="index==1?'active':''">年账单</view>
		</view>
		<view class="time">
			<view class="year" @click="show = true" v-if="index==0">
				<view>{{time}}</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="year" v-else>
				<view>本年账单</view>
				<!-- <u-icon name="arrow-down"></u-icon> -->
			</view>
			<view class="but">
				<view @click="avat(0)" :class="avata==0?'qun':''">支出</view>
				<view @click="avat(1)" :class="avata==1?'qun':''">充值</view>
			</view>
		</view>
		<view class="bg1 order" v-if="avata==0&&index==0">
			<view class="expen">月支出</view>
			<view class="money">¥{{(lists.byOrderPay+lists.wxOrderPay).toFixed(2)}}元</view>
			<view style="color:#666666 ; font-size: 24rpx;">共{{lists.totalCount}}笔订单</view>
		</view>
		<view class="bg1 order" v-else-if="avata==0&&index==1">
			<view class="expen">年支出</view>
			<view class="money">¥{{(lists.byOrderPay+lists.wxOrderPay).toFixed(2)}}元</view>
			<view style="color:#666666 ; font-size: 24rpx;">共{{lists.totalCount}}笔订单</view>
		</view>
		<view class="bg1 order" v-else-if="avata==1&&index==0">
			<view class="expen">月充值</view>
			<view class="money">¥{{(rechargeByMonth.allRecharge).toFixed(2)}}元</view>
			<view style="color:#666666 ; font-size: 24rpx;">共{{rechargeByMonth.count}}笔订单</view>
		</view>
		<view class="bg1 order" v-else-if="avata==1&&index==1">
			<view class="expen">年充值</view>
			<view class="money">¥{{(rechargeByYear.allRecharge).toFixed(2)}}元</view>
			<view style="color:#666666 ; font-size: 24rpx;">共{{rechargeByYear.count}}笔订单</view>
		</view>
		
		<view v-if="avata==1&&index==1">
			<view class="u-collapse" >
				<u-collapse >
					<u-collapse-item title="2024年" name="Docs guide">
						<view  v-for="(item,index) in rechargeListYear" :key="index">
						<view class="recharge">
							<view class="rechargelist">
								<view>充值</view>
								<view class="rechargeli">{{item.createTime}}</view>
							</view>
							<view class="rechargelist">
								<view style="color:#FF0000 ;">+{{item.money}}</view>
								<view class="rechargeli">当前余额：{{item.afterMoney}}</view>
							</view>
						
						</view>
							<u-line color="#ececec"></u-line>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		
		<view v-if="avata==1&&index==0">
			<view class="u-collapse" >
				<u-collapse >
					<u-collapse-item title="当前月份" name="Docs guide" >
						<view  v-for="(item,index) in rechargeListMonth" :key="index">
						<view class="recharge">
							<view class="rechargelist">
								<view>充值</view>
								<view class="rechargeli">{{item.createTime}}</view>
							</view>
							<view class="rechargelist">
								<view style="color:#FF0000 ;">+{{item.money}}</view>
								<view class="rechargeli">当前余额：{{item.afterMoney}}</view>
							</view>
						
						</view>
							<u-line color="#ececec"></u-line>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>




		<view class="content" v-if="avata==0">
			<view class="order-name">支出分类</view>
			<u-line margin="20rpx 0rpx"></u-line>
			<view class="cont-top">
				{{date}}在<text>车辆保养</text>
				上支出{{lists.byOrderPay}}元，占总支<text>{{(lists.byOrderPay*100/(lists.byOrderPay+lists.wxOrderPay)).toFixed(2)}}%</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
			</view>
			<view class="car">
				<view class="li">车辆保养 <text>（共{{lists.byOrderCount}}笔）</text></view>
				<view class="li1">
					<view>¥{{lists.byOrderPay}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<u-line-progress height="10" :percentage="(lists.byOrderPay*100/(lists.byOrderPay+lists.wxOrderPay)).toFixed(2)"
				activeColor="#73A0FA"></u-line-progress>
			<view class="car">
				<view class="li">车辆维修 <text>（共{{lists.wxOrderCount}}笔）</text></view>
				<view class="li1">
					<view>¥{{lists.wxOrderPay}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<u-line-progress height="10"
				:percentage="(lists.wxOrderPay*100/(lists.byOrderPay+lists.wxOrderPay)).toFixed(2)"
				activeColor="#73DEB3"></u-line-progress>
		</view>
		
		
		
		<view style="margin-top: 20rpx;visibility: hidden;">1</view>
		<u-loading-page loading-text="加载中" :loading="loading"></u-loading-page>
		<u-datetime-picker @cancel="show=false"  :minDate="1704222222222" ref="datetimePicker" :show="show" :mode="year"
			:formatter="formatter" @confirm="confirm"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getAllPriceByStatusByTimeType,
		getAllRechargeByYear,
		getAllRechargeByMonth,
		getRechargeListByYear,
		getRechargeListByMonth
	} from '@/api/orders.js'
	export default {
		data() {
			return {
				lists: {},
				timeType: 2,
				year: 'year-month',
				rechargeByYear: {},
				rechargeByMonth: {},
				rechargeListYear: [],
				rechargeListMonth: [],
				loading: true,
				time: "当前月份",
				date:'本月',
				avata: 0,
				index: 0,
				show: false,
				yearMonth: "",
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#5B8FF9", "#5AD8A6"],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					tooltip: { //设置鼠标移上去后会显示数据 -黑框浮层

						show: true, //关闭鼠标移上去后显示浮框信息
						trigger: 'item',
						formatter: '{a} <br/>{b} ({d}%)' //a:头部标题 b:单项名称name c:值value d:百分比
					},
					subtitle: {
						show: false,
					},
					title: {
						show: false,
						name: "车辆保养",
						fontSize: 15,
						color: "#ffffff"
					},
					subtitle: {
						show: false,
						name: "70%",
						fontSize: 20,
						color: "#ffffff"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 1,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		onReady() {
			this.selectDetailByTime();
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad() {
			this.AllRechargeByYear();
			this.AllRechargeByMonth();
			this.RechargeListByYear();
			this.RechargeListByMonth();
		},
		methods: {
			avat(i) {
				if (i == 0) {
					if (this.index == 0) {
						this.time = "当前月份"
						this.date="本月"
						this.selectDetailByTime()
					} else {
						this.date="本年"
						this.selectDetailByTime()
					}
					this.avata = 0
				} else {
					if (this.index == 1) {
						this.AllRechargeByYear()
						this.RechargeListByYear()
					} else {
						this.RechargeListByMonth()
						this.AllRechargeByMonth()
					}
					this.avata = 1
				}
			},
			bill(i) {
				if (i == 0) {
					console.log("月")
					this.index = i
					this.timeType = 2
					this.time = "当前月份"
					this.year = 'year-month'
					if (this.avata == 0) {
						this.date="本月"
						this.selectDetailByTime()
					} else {
						this.AllRechargeByMonth()

					}
				} else {
				
					this.index = i
					this.timeType = 1
					if (this.avata == 0) {
						this.date="本年"
						this.selectDetailByTime()
						console.log("之年")
					} else {
						this.AllRechargeByYear()
					}
					// this.year='year'
					// this.time="当前年份"
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			confirm(e) {

				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm');
				this.yearMonth = timeValue;
				this.time = timeValue
				if (this.index == 0 && this.avata == 1) {
					this.RechargeListByMonth()
					this.AllRechargeByMonth()
				} else if (this.index == 0 && this.avata == 0) {
					this.selectDetailByTime()
					
				}
				this.show = false
			},
			open(e) {
				// console.log('open', e)
			},
			// 年月查消费记录
			selectDetailByTime() {
				let params = {
					businessId: uni.getStorageSync("businessId"),
					timeType: this.timeType,
					yearMonth: this.yearMonth
				}
				getAllPriceByStatusByTimeType(params).then((res) => {
					this.lists = res.data
					// let byOrderPay = (this.lists.byOrderPay * 100 / (this.lists.byOrderPay +
					// 	this.lists.wxOrderPay)).toFixed(2)
					// let wxOrderPay = (this.lists.wxOrderPay * 100 / (this.lists.byOrderPay +
					// 	this.lists.wxOrderPay)).toFixed(2)
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let re = {
						series: [{
							data: [{
								"name": "车辆保养",
								"value": this.lists.byOrderPay * 100 / (this.lists.byOrderPay +
									this.lists.wxOrderPay)
							}, {
								"name": "车辆维修",
								"value": this.lists.wxOrderPay * 100 / (this.lists.byOrderPay +
									this.lists.wxOrderPay)
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(re));
				})
			},
			AllRechargeByYear() {
				this.loading = true
				let param = {
					enterpriseId: uni.getStorageSync("businessId"),
					year:"2024"
				}
				// 年总充值
				getAllRechargeByYear(param).then((res) => {
					this.rechargeByYear = res.data
					this.loading = false
				})
			},
			AllRechargeByMonth() {
				this.loading = true
				let param = {
					enterpriseId: uni.getStorageSync("businessId"),
					yearMonth: this.yearMonth,
					timeType: 2,
				}
				// 月总充值
				getAllRechargeByMonth(param).then((res) => {
					// console.log(res.data)
					this.rechargeByMonth = res.data
					this.loading = false
				})
			},
			RechargeListByYear() {
				this.loading = true
				let param = {
					enterpriseId: uni.getStorageSync("businessId"),
					year:"2024"
					
				}
				// 充值年记录
				getRechargeListByYear(param).then((res) => {
					this.rechargeListYear = res.data
					this.loading = false
				})
			},
			RechargeListByMonth() {
				this.loading = true
				let param = {
					enterpriseId: uni.getStorageSync("businessId"),
					yearMonth: this.yearMonth
				}
				//充值月记录
				getRechargeListByMonth(param).then((res) => {
					console.log(res,666)
					this.rechargeListMonth = res.data
					this.loading = false
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.page {
		background-color: #FFFCF2;
		width: 100vw;
		height: 100%;
		position: relative;
		z-index: 0;
	}

	.bg {
		position: absolute;
		height: 374rpx;
		width: 100%;
		background: linear-gradient(#FACC39 0%, #fff 100%);
		z-index: -1;
	}

	.top {
		font-size: 32rpx;
		box-sizing: border-box;
		padding: 20rpx 80rpx;
		@include flex(row, space-around, center) color: #666666;

		.active {
			color: #000;
			position: relative;
			width: 100rpx;
		}

		.active::after {
			margin-top: 50rpx;
			position: absolute;
			left: 0;
			content: '';
			width: 80%;
			border-bottom: 8rpx solid #AB8302;
		}
	}

	.time {
		margin: 20rpx;

		@include flex(row, space-between, center) .year {
			font-size: 28rpx;
			display: flex;
		}

		.but {

			font-size: 28rpx;
			display: flex;
			color: #735901;

			view {
				padding: 0rpx 20rpx;
			}

			.qun {
				border-radius: 50rpx;
				border: solid 2rpx #735901;
			}
		}
	}

	.bg1 {
		background: linear-gradient(#FFF3CE 0%, #fff 100%);
	}

	.order {
		box-shadow: 0px 4rpx 8rpx 0px rgba(225, 225, 225, 0.44);
		margin: 20rpx 10px 10px 17rpx;
		padding: 10rpx 40rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		height: 180rpx;
		line-height: 50rpx;
		border: solid 1rpx #FFFFFF;

		.expen {
			font-size: 28rpx;

		}

		.money {
			font-size: 40rpx;
			font-weight: 600;
		}
	}

	.u-collapse {
		margin: 16rpx;
		background-color: #fff;
		width: 716rpx;
		position: absolute;
		z-index: 9999 !important;
	}

	.recharge {
		@include flex(row, space-between, center) .rechargelist {

			font-size: 32rpx;
			font-weight: 600;

			.rechargeli {
				font-size: 20rpx;
				font-family: 500;

			}
		}
	}

	.content {

		z-index: 222;
		width: 718rpx;
		height: 1020rpx;
		margin: 10rpx 16rpx 10rpx 16rpx;
		padding: 26rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 10rpx;

		.order-name {
			font-size: 32rpx;
			font-weight: 600;
		}

		.cont-top {
			font-size: 24rpx;

			text {
				color: #1677FF;
			}
		}

		.car {
			margin: 10rpx;
			font-size: 28rpx;

			@include flex(row, space-between, center) .li {
				text {
					font-size: 24rpx;
					color: #999999;
					margin-left: 20rpx;
				}
			}

			.li1 {
				display: flex;
			}
		}

	}

	::v-deep .u-cell__title-text {
		font-size: 32rpx;
		font-weight: 600;
	}

	// .nav {
	// 	padding-top: 78rpx;
	// 	margin-left: 10rpx;
	// 	box-sizing: border-box;
	// 	display: flex;
	// 	font-size: 34rpx;
	// }
</style>